<template>
	<view class="list-left">
		<view class="title" style="font-size: 34rpx;font-weight: bold;" v-if="isFload" @click="toCreaterPage">
			<text style="display: inline-block;width: 350upx;text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;" v-if="video.shop_name">@{{video.shop_name}}</text>
		<text style="display: inline-block;width: 350upx;text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;" v-else>@{{video.title}}</text>
		</view>
		<view class="music-box">
			<view class="fload" style="font-size: 34rpx;" :class="isFload ? 'hide' : 'show'">
						{{video.describe}}
			</view>
			<text @click="fload" v-if="isFload" v-show="video.describe.length>'40'" class="se">展开</text>
			<text @click="fload" v-if="!isFload" v-show="video.describe.length>'40'" class="se">收起</text>
		</view>
		<view
			style="display: flex;flex-direction: row;
			border-radius: 10rpx;font-size: 24rpx;align-items: flex-end;text-overflow: ellipsis;overflow: hidden;padding-bottom: 15px;padding-top: 5px;flex-wrap: wrap;">
			<view v-for="(items,i) in video.topicdata">
				<text
					style="color: #fff; word-wrap: break-word; word-break: normal;font-size: 15px;padding-left: 5px;font-weight: bold;"
					@click="toti(items.id)">#{{items.cate_name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import homeWindow from '../homeWindow.vue'
	import MoteLinesDivide from "@/components/mote-lines-divide/mote-lines-divide"
	export default {
		data() {
			return {
				goods_name: '',
				videoDesc: '',
				shop_name: '',
				author: '',
				name: '',
				id: '',
				isflase:false,
				isFload: true,
				goodsList: []
			}
		},
		props: ['videoInfo','video'],
		watch: {	
			videoInfo(videoInfo) {
				console.log(videoInfo)
				this.goodsList = videoInfo.goodsList
			}
		},
		components: {
			homeWindow,
			MoteLinesDivide
		},
		mounted() {
			this.id = this.videoInfo.id
			this.shop_name = this.videoInfo.shop_name
			this.goods_name = this.videoInfo.goods_name
		},
		methods: {
			toti(id) {
				uni.navigateTo({
					url: `/pages/huati/index?id=${id}`
				})
			},
			toCreaterPage() {
				uni.navigateTo({
					url: `../../pagesC/home/personage/personage?userId=${this.videoInfo.shop_id}&circle_id=${this.videoInfo.circle_id}`
				})
			},
			fload() {
				//改变isFload的状态
				this.isFload = !this.isFload;
			},

			getNavCircle(id, type, state) {
				console.log(id)
				if (type == 1) {
					uni.navigateTo({
						url: '../../pagesC/home/shopDetail/shopDetail?id=' + id,
						fail: err => {
							console.log(err)
						}
					})
				} else if (type == 2 && state == 1) {
					uni.navigateTo({
						url: `/pages/zhanhui/index?shop_id=${this.videoInfo.circle_shop_id}&circle_id=${this.videoInfo.circle_id}`
					})
				} else if (type == 2 && state == 2) {
					uni.navigateTo({
						url: `/pages/zhanhui/zhaning?shop_id=${this.videoInfo.circle_shop_id}&circle_id=${this.videoInfo.circle_id}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/zhanhui/index?shop_id=${this.videoInfo.circle_shop_id}&circle_id=${this.videoInfo.circle_id}`
					})
				}
			},
			open() {

				// uni.showLoading({
				// 	title:"请求中..."
				// })
				this.$http.Videogoodlist({
					video_id: this.videoInfo.id
				}).then(res => {
					console.log(res)
					if (res.status == 200) {
						this.goodsList = res.data
						// uni.hideTabBar()
						this.$refs.tel.open()
						this.$emit('openShowcase')
					} else {
						wx.showToast({
							title: res.mess,
							mask: true,
							duration: 1500
						})
					}
				}).catch(err => {
					wx.showToast({
						title: '服务器错误',
						mask: true,
						icon: 'none',
						duration: 1500
					})
				})



			},
			close() {
				uni.showTabBar()
				this.$refs.tel.close()
				this.$emit('openShowcase')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.se {
		display: inline-block;
		background: #373737;
		color: #fff;
		width: 50px;
		text-align: center;
	}

	.hide {
		display: -webkit-box !important;
	}

	.show {
		display: block!important;
		// height: 400upx!important;
		// display: -webkit-box;
		// word-break: break-all;
		// -webkit-box-orient: vertical;
		// /* 要显示多少行就改变line-clamp的数据,此处折叠起来显示一行*/
		// -webkit-line-clamp: 3;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// width: 78%;
	}

	.list-left {
		// width: 70%;
		// height: 240rpx;
		color: white;
		margin-bottom: 00rpx;
		width: auto;
	}

	.author {
		height: 66rpx;
		line-height: 66rpx;
		font-size: 36rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		max-width: 440rpx;
		height: 50rpx;
		background-color: rgba($color: #000000, $alpha: 0.3);
		border-radius: 10rpx;

		.left {
			display: flex;
			align-items: center;
			width: 150rpx;
		}

		.name {
			text-overflow: ellipsis;
			overflow: hidden;
			max-width: 288rpx;
			white-space: nowrap;
		}

		image {
			width: 36rpx;
			height: 36rpx;
			margin: 0 15rpx;
		}
	}

	.circle_top {
		height: 66rpx;
		line-height: 66rpx;
		font-size: 41rpx;
		font-weight: bold;
		display: flex;
		// width: auto;
		align-items: center;
		// width: 250rpx;
		max-width: 400rpx;
		min-width: 200rpx;
		// height: 50rpx;
		background-color: rgba($color: #000000, $alpha: 0.3);
		border-radius: 10rpx;
		margin-top: 10rpx;

		image {
			width: 36rpx;
			height: 36rpx;
			margin: 0 15rpx;
		}

		view {
			flex: 1;
			overflow: hidden;
			// max-width: 220rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	.title {
		// width: 420rpx;
		line-height: 80rpx;
		display: flex;
		align-items: center;
		font-weight: bold;
		color: #FFFAF0;
	}

	.music-box {
		// overflow: hidden;
		width: 100%;
		// height: 130upx;
		font-size: 30upx;
		display: flex;
		align-items: flex-end;
	}

	.fload {
		// height: 130upx;
		display: -webkit-box;
		word-break: break-all;
		-webkit-box-orient: vertical;
		/* 要显示多少行就改变line-clamp的数据,此处折叠起来显示一行*/
		-webkit-line-clamp: 3;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 78%;
	}

	@keyframes scroll-x {
		0% {
			transform: translate3d(60%, 0, 0);
		}

		100% {
			transform: translate3d(-60%, 0, 0);
		}
	}
</style>
